<template>
  <div class="payment-container">
    <!-- 支付统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-icon">
              <el-icon><Money /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">¥{{ Number(stats.totalAmount || 0).toFixed(2) }}</div>
              <div class="stats-label">总交易金额</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ stats.totalOrders }}</div>
              <div class="stats-label">总订单数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ stats.todayOrders }}</div>
              <div class="stats-label">今日订单</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-icon">
              <el-icon><PieChart /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ Number(stats.successRate || 0).toFixed(1) }}%</div>
              <div class="stats-label">支付成功率</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :lg="16">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>交易趋势</span>
              <div class="header-right">
                <el-radio-group v-model="trendTimeRange" size="small" @change="loadTrendData">
                  <el-radio-button label="week">近7天</el-radio-button>
                  <el-radio-button label="month">近30天</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div class="chart-container" ref="trendChart"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="8">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>支付方式分布</span>
            </div>
          </template>
          <div class="chart-container" ref="paymentTypeChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最佳交易记录 -->
    <el-card class="best-trades">
      <template #header>
        <div class="card-header">
          <span>最近交易记录</span>
        </div>
      </template>
      <el-table :data="recentOrders" style="width: 100%" size="small">
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="userName" label="用户" width="120">
          <template #default="scope">
            {{ scope.row.userName || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="packageName" label="套餐名称" width="120" />
        <el-table-column prop="amount" label="金额" width="100">
          <template #default="scope">
            ¥{{ Number(scope.row.amount || 0).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="支付方式" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.paymentMethod === 'wechat' ? 'success' : 'primary'">
              {{ scope.row.paymentMethod === 'wechat' ? '微信支付' : '支付宝' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" />
      </el-table>
    </el-card>

    <!-- 订单列表 -->
    <el-card class="order-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>最近交易</span>
          <div class="header-right">
            <el-button type="primary" @click="exportOrders">导出数据</el-button>
          </div>
        </div>
      </template>
      
      <!-- 搜索栏 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单号" clearable />
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="searchForm.payType" placeholder="请选择支付方式" clearable>
            <el-option label="支付宝" value="alipay" />
            <el-option label="微信支付" value="wxpay" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-select v-model="searchForm.status" placeholder="请选择支付状态" clearable>
            <el-option label="待支付" value="0" />
            <el-option label="支付成功" value="1" />
            <el-option label="支付失败" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="searchForm.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      
      <!-- 订单表格 -->
      <el-table
        :data="orderList"
        v-loading="loading"
        border
        style="width: 100%"
      >
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="userName" label="用户" width="120">
          <template #default="scope">
            {{ scope.row.userName || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="packageName" label="套餐名称" width="120" />
        <el-table-column prop="amount" label="金额" width="100">
          <template #default="scope">
            ¥{{ Number(scope.row.amount || 0).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="支付方式" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.paymentMethod === 'wechat' ? 'success' : 'primary'">
              {{ scope.row.paymentMethod === 'wechat' ? '微信支付' : '支付宝' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" />
        <el-table-column prop="payTime" label="支付时间" width="160" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="showOrderDetail(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="page.pageNo"
          v-model:page-size="page.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 订单详情对话框 -->
    <el-dialog
      v-model="detailDialog.visible"
      title="订单详情"
      width="600px"
      destroy-on-close
    >
      <div v-loading="detailDialog.loading">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="订单号">
            {{ detailDialog.data.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item label="用户">
            {{ detailDialog.data.userName }}
          </el-descriptions-item>
          <el-descriptions-item label="商品名称">
            {{ detailDialog.data.productName }}
          </el-descriptions-item>
          <el-descriptions-item label="支付金额">
            ¥{{ (detailDialog.data.amount / 100).toFixed(2) }}
          </el-descriptions-item>
          <el-descriptions-item label="支付方式">
            {{ detailDialog.data.paymentMethod === 'wechat' ? '微信支付' : '支付宝' }}
          </el-descriptions-item>
          <el-descriptions-item label="支付状态">
            {{ getStatusText(detailDialog.data.status) }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ detailDialog.data.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="支付时间">
            {{ detailDialog.data.payTime }}
          </el-descriptions-item>
          <el-descriptions-item label="交易流水号">
            {{ detailDialog.data.tradeNo }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Money, Document, TrendCharts, PieChart } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const { proxy } = getCurrentInstance()

const api = {
  getPaymentStats: '/admin/payment/stats',
  getPaymentTrend: '/admin/payment/trend',
  getPaymentTypeStats: '/admin/payment/typeStats',
  getPaymentList: '/admin/payment/list',
  getPaymentDetail: '/admin/payment/detail',
  exportPayments: '/admin/payment/export'
}

// 统计数据
const stats = ref({
  totalAmount: 0,
  totalOrders: 0,
  todayOrders: 0,
  successRate: 0
})

// 图表实例
let trendChartInstance = null
let paymentTypeChartInstance = null

// 趋势图时间范围
const trendTimeRange = ref('week')

// 搜索表单
const searchForm = ref({
  orderNo: '',
  payType: '',
  status: '',
  timeRange: []
})

// 订单列表数据
const orderList = ref([])
const loading = ref(false)

// 分页
const page = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0
})

// 订单详情对话框
const detailDialog = reactive({
  visible: false,
  loading: false,
  data: {}
})

// 加载统计数据
const loadStats = async () => {
  try {
    console.log('开始请求支付统计数据...')
    const result = await proxy.Request({
      url: api.getPaymentStats
    })
    console.log('统计数据响应:', result)
    
    if (result?.code === 200 && result.data) {
      const data = result.data
      console.log('解析前的统计数据:', data)
      
      stats.value = {
        totalAmount: Number(data.totalAmount || 0),
        totalOrders: Number(data.totalOrders || 0),
        todayOrders: Number(data.todayOrders || 0),
        successRate: Number(data.successRate || 0)
      }
      
      console.log('最终设置的统计数据:', stats.value)
    } else {
      console.error('获取统计数据失败:', result)
      ElMessage.error('获取统计数据失败：' + (result?.message || '未知错误'))
    }
  } catch (error) {
    console.error('获取支付统计失败:', error)
    ElMessage.error('获取支付统计失败')
  }
}

// 初始化交易趋势图表
const initTrendChart = (data) => {
  const chartDom = proxy.$refs.trendChart
  if (!chartDom) return
  
  trendChartInstance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: data.dates
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '交易金额',
        type: 'line',
        smooth: true,
        data: data.amounts,
        areaStyle: {
          opacity: 0.3
        }
      },
      {
        name: '订单数',
        type: 'line',
        smooth: true,
        data: data.orders,
        areaStyle: {
          opacity: 0.3
        }
      }
    ]
  }
  trendChartInstance.setOption(option)
}

// 初始化支付方式分布图表
const initPaymentTypeChart = (data) => {
  const chartDom = proxy.$refs.paymentTypeChart
  if (!chartDom) return
  
  paymentTypeChartInstance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [
          { value: data.alipay, name: '支付宝' },
          { value: data.wechat, name: '微信支付' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  paymentTypeChartInstance.setOption(option)
}

// 加载趋势数据
const loadTrendData = async () => {
  try {
    console.log('开始请求支付趋势数据...')
    const result = await proxy.Request({
      url: api.getPaymentTrend,
      params: { timeRange: trendTimeRange.value }
    })
    console.log('趋势数据响应:', result)
    
    if (result?.code === 200 && result.data) {
      const trendData = result.data.data || []
      console.log('趋势数据:', trendData)
      
      // 提取日期和数据
      const dates = []
      const amounts = []
      const orders = []
      
      trendData.forEach(item => {
        dates.push(item.date)
        amounts.push(parseFloat(item.amount || 0))
        orders.push(parseInt(item.orders || 0))
      })
      
      // 初始化趋势图
      initTrendChart({ dates, amounts, orders })
    } else {
      console.error('获取趋势数据失败:', result)
      ElMessage.error('获取趋势数据失败：' + (result?.message || '未知错误'))
    }
  } catch (error) {
    console.error('加载趋势数据失败:', error)
    ElMessage.error('加载趋势数据失败')
  }
}

// 加载支付方式分布数据
const loadPaymentTypeStats = async () => {
  try {
    console.log('开始请求支付方式分布数据...')
    const result = await proxy.Request({
      url: api.getPaymentTypeStats
    })
    console.log('支付方式分布响应:', result)
    
    if (result?.code === 200 && result.data) {
      const statsData = result.data.data || []
      console.log('支付方式分布数据:', statsData)
      
      // 初始化支付方式分布图
      initPaymentTypeChart({
        alipay: statsData.find(item => item.paymentMethod === 'alipay')?.count || 0,
        wechat: statsData.find(item => item.paymentMethod === 'wechat')?.count || 0
      })
    } else {
      console.error('获取支付方式分布失败:', result)
      ElMessage.error('获取支付方式分布失败：' + (result?.message || '未知错误'))
    }
  } catch (error) {
    console.error('加载支付方式分布失败:', error)
    ElMessage.error('加载支付方式分布失败')
  }
}

// 加载订单列表
const loadOrderList = async () => {
  loading.value = true
  try {
    const params = {
      pageNo: page.pageNo,
      pageSize: page.pageSize,
      ...searchForm.value,
      startTime: searchForm.value.timeRange?.[0],
      endTime: searchForm.value.timeRange?.[1]
    }
    const result = await proxy.Request({
      url: api.getPaymentList,
      params
    })
    if (result) {
      orderList.value = result.data.list
      page.total = result.data.totalCount
    }
  } finally {
    loading.value = false
  }
}

// 查询和重置
const handleSearch = () => {
  page.pageNo = 1
  loadOrderList()
}

const resetSearch = () => {
  searchForm.value = {
    orderNo: '',
    payType: '',
    status: '',
    timeRange: []
  }
  handleSearch()
}

// 分页方法
const handleSizeChange = (val) => {
  page.pageSize = val
  loadOrderList()
}

const handleCurrentChange = (val) => {
  page.pageNo = val
  loadOrderList()
}

// 查看订单详情
const showOrderDetail = async (row) => {
  detailDialog.visible = true
  detailDialog.loading = true
  try {
    const result = await proxy.Request({
      url: api.getPaymentDetail,
      params: { orderNo: row.orderNo }
    })
    
    if (result) {
      detailDialog.data = result.data
    }
  } finally {
    detailDialog.loading = false
  }
}

// 导出订单
const exportOrders = () => {
  ElMessageBox.confirm(
    '确定要导出订单数据吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      const params = {
        ...searchForm.value,
        startTime: searchForm.value.timeRange?.[0],
        endTime: searchForm.value.timeRange?.[1]
      }
      const result = await proxy.Request({
        url: api.exportPayments,
        params,
        responseType: 'blob'
      })
      
      if (result) {
        const blob = new Blob([result.data], { type: 'application/vnd.ms-excel' })
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = '支付订单数据.xlsx'
        link.click()
        window.URL.revokeObjectURL(link.href)
      }
    } catch (error) {
      console.error('导出数据失败:', error)
      ElMessage.error('导出失败')
    }
  })
}

// 获取状态文本和类型
const getStatusText = (status) => {
  const statusMap = {
    0: '待支付',
    1: '支付成功',
    2: '支付失败'
  }
  return statusMap[status] || '未知状态'
}

const getStatusType = (status) => {
  const statusMap = {
    0: 'info',    // 待支付
    1: 'success', // 支付成功
    2: 'danger'   // 支付失败
  }
  return statusMap[status] || 'info'
}

// 监听窗口大小变化
const handleResize = () => {
  trendChartInstance?.resize()
  paymentTypeChartInstance?.resize()
}

// 初始化
onMounted(() => {
  loadStats()
  loadOrderList()
  loadTrendData()
  loadPaymentTypeStats()
  window.addEventListener('resize', handleResize)
})

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  trendChartInstance?.dispose()
  paymentTypeChartInstance?.dispose()
})
</script>

<style lang="scss" scoped>
.payment-container {
  background: linear-gradient(135deg, #f6f9fc 0%, #eef2f7 100%);
  min-height: 100%;
  padding: 20px;
  border-radius: 16px;
  
  .stats-row {
    margin-bottom: 24px;
    
    .stats-card {
      height: 140px;
      border: none;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #00c6fb 0%, #005bea 100%);
        opacity: 0;
        transition: opacity 0.3s;
      }
      
      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        
        &::before {
          opacity: 1;
        }
        
        .stats-icon {
          transform: scale(1.1) rotate(10deg);
        }
      }
      
      .stats-content {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 24px;
        
        .stats-icon {
          width: 64px;
          height: 64px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 24px;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          
          .el-icon {
            font-size: 32px;
            color: #fff;
          }
          
          &:nth-child(1) {
            background: linear-gradient(45deg, #00c6fb 0%, #005bea 100%);
            box-shadow: 0 4px 12px rgba(0, 198, 251, 0.3);
          }
        }
        
        .stats-info {
          flex: 1;
          
          .stats-value {
            font-size: 28px;
            font-weight: 600;
            background: linear-gradient(90deg, #2c3e50, #3498db);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
          }
          
          .stats-label {
            font-size: 15px;
            color: #64748b;
            font-weight: 500;
          }
        }
      }
    }
  }
  
  .chart-row {
    margin-bottom: 24px;
    
    .chart-card {
      border: none;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      
      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }
      
      .card-header {
        padding: 20px 24px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        span {
          font-size: 18px;
          font-weight: 600;
          background: linear-gradient(90deg, #2c3e50, #3498db);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        
        .header-right {
          .el-radio-group {
            .el-radio-button__inner {
              background: transparent;
              border: 1px solid #e2e8f0;
              color: #64748b;
              transition: all 0.3s;
              
              &:hover {
                color: #3498db;
                border-color: #3498db;
              }
            }
            
            .is-active .el-radio-button__inner {
              background: linear-gradient(90deg, #00c6fb 0%, #005bea 100%);
              border-color: transparent;
              color: #fff;
              box-shadow: 0 4px 12px rgba(0, 198, 251, 0.3);
            }
          }
        }
      }
      
      .chart-container {
        height: 420px;
        padding: 24px;
      }
    }
  }
  
  .best-trades {
    margin-bottom: 24px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }
    
    .card-header {
      padding: 20px 24px;
      border-bottom: 1px solid rgba(226, 232, 240, 0.8);
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      span {
        font-size: 18px;
        font-weight: 600;
        background: linear-gradient(90deg, #2c3e50, #3498db);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  
  .order-card {
    border: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }
    
    .card-header {
      padding: 20px 24px;
      border-bottom: 1px solid rgba(226, 232, 240, 0.8);
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      span {
        font-size: 18px;
        font-weight: 600;
        background: linear-gradient(90deg, #2c3e50, #3498db);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      
      .header-right {
        .el-button {
          background: linear-gradient(90deg, #00c6fb 0%, #005bea 100%);
          border: none;
          padding: 10px 24px;
          font-weight: 500;
          transition: all 0.3s;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 198, 251, 0.3);
          }
        }
      }
    }
    
    .search-form {
      padding: 24px;
      background: #f8fafc;
      border-radius: 0 0 16px 16px;
      
      .el-form-item {
        margin-bottom: 16px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .el-input__wrapper,
        .el-select .el-input__wrapper {
          box-shadow: 0 0 0 1px #e2e8f0 inset;
          border-radius: 8px;
          
          &:hover {
            box-shadow: 0 0 0 1px #3498db inset;
          }
          
          &.is-focus {
            box-shadow: 0 0 0 2px #3498db inset;
          }
        }
        
        .el-button {
          border-radius: 8px;
          padding: 10px 24px;
          font-weight: 500;
          
          &--primary {
            background: linear-gradient(90deg, #00c6fb 0%, #005bea 100%);
            border: none;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(0, 198, 251, 0.3);
            }
          }
        }
      }
    }
    
    :deep(.el-table) {
      margin: 24px;
      border-radius: 12px;
      overflow: hidden;
      
      &::before {
        display: none;
      }
      
      th {
        background-color: #f8fafc;
        font-weight: 600;
        color: #2c3e50;
        padding: 16px;
        
        &.is-leaf {
          border-bottom: 2px solid #e2e8f0;
        }
      }
      
      td {
        padding: 16px;
        border-bottom: 1px solid #e2e8f0;
      }
      
      .el-tag {
        border-radius: 6px;
        padding: 4px 12px;
        font-weight: 500;
        
        &--primary {
          background: rgba(52, 152, 219, 0.1);
          border-color: rgba(52, 152, 219, 0.2);
          color: #3498db;
        }
        
        &--success {
          background: rgba(46, 204, 113, 0.1);
          border-color: rgba(46, 204, 113, 0.2);
          color: #2ecc71;
        }
        
        &--warning {
          background: rgba(241, 196, 15, 0.1);
          border-color: rgba(241, 196, 15, 0.2);
          color: #f1c40f;
        }
        
        &--danger {
          background: rgba(231, 76, 60, 0.1);
          border-color: rgba(231, 76, 60, 0.2);
          color: #e74c3c;
        }
      }
      
      .el-button {
        &.el-button--primary {
          color: #3498db;
          
          &:hover {
            color: #2980b9;
          }
        }
      }
    }
    
    .pagination-container {
      padding: 20px 24px;
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;
      border-radius: 0 0 16px 16px;
      
      :deep(.el-pagination) {
        .el-pagination__total,
        .el-pagination__sizes {
          margin-right: 16px;
        }
        
        .el-pagination__jump {
          margin-left: 16px;
        }
        
        button {
          background: transparent;
          border: 1px solid #e2e8f0;
          
          &:hover {
            color: #3498db;
            border-color: #3498db;
          }
          
          &:disabled {
            background: #f1f5f9;
            border-color: #e2e8f0;
          }
        }
        
        .el-pager li {
          background: transparent;
          border: 1px solid #e2e8f0;
          
          &:hover {
            color: #3498db;
            border-color: #3498db;
          }
          
          &.is-active {
            background: linear-gradient(90deg, #00c6fb 0%, #005bea 100%);
            border-color: transparent;
            color: #fff;
          }
        }
      }
    }
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .payment-container {
    padding: 16px;
    
    .stats-row,
    .chart-row {
      .el-col {
        margin-bottom: 16px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .search-form {
      .el-form-item {
        margin-right: 0;
        margin-bottom: 16px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style> 